<template>
    <div class="TalentList">
        <h3>达人歌单</h3>
        
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
            <li v-for="item in playlistData" :key="item.content_id">
                <div class="cover">
                    <img :src="item.cover_url_medium" alt=""> 
                    <span>{{(item.tid/1000)| numFilter(1)}}万</span>
                </div>
                
                
                <span>{{item.title}}</span>
            </li>
        </ul>
        </div>
    </div>

</template>
<script>
    import axios from 'axios'
    import BSroll from 'better-scroll'
    export default ({
        data(){
            return {
                playlistData:[]
            };
        },
        mounted(){
            this.getPlaylist()
        }, 
        methods:{
            getPlaylist(){
                axios.get("/api/recommend/playlist")        
                .then(res => {
                    console.log(res.data.data.list)
                    this.playlistData = res.data.data.list
                    this.betterScrollHorizontal(this.playlistData.length,160)
                })        
                .catch(err => {
                    console.error(err); 
                })
            },
            betterScrollHorizontal(num,itemWidth){
                let width = num *itemWidth;
                this.$refs.content.style.width = width +  "px";
                this.$nextTick(()=>{
                    this.scroll = new BSroll(this.$refs.wrapper,{
                        scrollX : true,
                        scrollY : false,
                        startX : 0,
                        click :true
                    })
                })

            }

        },
        filters:{
            numFilter(value,num){
                return parseFloat(value).toFixed(num)
            }
        },  
    })
</script>

<style scoped>
    .TalentList{
        width: 90%;
        margin:  0 auto;
    }
    .TalentList>h3{
        text-align: left;
    }
    .wrapper{
        overflow: hidden;
    }
    ul.content>li{
        display: inline-block;
        width: 160px;
        vertical-align: top;
    }
    ul.content>li img{
        width: 90%;
        border-radius: 20px;
    }

    ul.content>li>span{
        font-size: 12px;
        display: inline-block;
        width: 90%;
    }
    .cover{
        position: relative;
    }
    .cover>span{
        background-color: gray;
        position: absolute;
        right: 10px;
        bottom: 5px;
        border-radius: 20px;
        width: 100px;
    }
    ul.content>li>span{
        font-size: 12px;
        display: inline-block;
        width: 90%;
    }

</style>
